85:I[903690,["/chat-static/_next/static/immutable/chunks/04hbfmh6hbqss.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/2e3p8j58j-2ac.js","/chat-static/_next/static/immutable/chunks/2ozwdzttq5i1f.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/3ishjhw9r5hu6.js","/chat-static/_next/static/immutable/chunks/219cqn3u0bpkg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0xi2c3jaocjvt.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/39g-v5gn16xpu.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2lb8tgn9smhmm.js","/chat-static/_next/static/immutable/chunks/1ybmqoirdq34w.js","/chat-static/_next/static/immutable/chunks/1erg8g21a3w0b.js","/chat-static/_next/static/immutable/chunks/1_qpltudrcx39.js","/chat-static/_next/static/immutable/chunks/3h0z-hp8-yi1i.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/12iw2o65f5diw.js","/chat-static/_next/static/immutable/chunks/3fnbcspmxidog.js","/chat-static/_next/static/immutable/chunks/0qmfntxs_4897.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/25bs_fkkq5ymp.js","/chat-static/_next/static/immutable/chunks/21e0q2tppm01j.js"],"ExplicitChatIdProvider"] 86:I[838238,["/chat-static/_next/static/immutable/chunks/04hbfmh6hbqss.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/2e3p8j58j-2ac.js","/chat-static/_next/static/immutable/chunks/2ozwdzttq5i1f.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/3ishjhw9r5hu6.js","/chat-static/_next/static/immutable/chunks/219cqn3u0bpkg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0xi2c3jaocjvt.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/39g-v5gn16xpu.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2lb8tgn9smhmm.js","/chat-static/_next/static/immutable/chunks/1ybmqoirdq34w.js","/chat-static/_next/static/immutable/chunks/1erg8g21a3w0b.js","/chat-static/_next/static/immutable/chunks/1_qpltudrcx39.js","/chat-static/_next/static/immutable/chunks/3h0z-hp8-yi1i.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/12iw2o65f5diw.js","/chat-static/_next/static/immutable/chunks/3fnbcspmxidog.js","/chat-static/_next/static/immutable/chunks/0qmfntxs_4897.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/25bs_fkkq5ymp.js","/chat-static/_next/static/immutable/chunks/21e0q2tppm01j.js"],"SWRDataProvider"] 87:T15a2,[V0_FILE]typescriptreact:file="components/hero-video-dialog-demo.tsx" import HeroVideoDialog from "@/components/magicui/hero-video-dialog" export default function HeroVideoDialogDemo() { return (

) } [V0_FILE]typescriptreact:file="components/magicui/hero-video-dialog.tsx" /* eslint-disable @next/next/no-img-element */ "use client" import { useState } from "react" import { AnimatePresence, motion } from "motion/react" import { Play, XIcon } from "lucide-react" import { cn } from "@/lib/utils" type AnimationStyle = | "from-bottom" | "from-center" | "from-top" | "from-left" | "from-right" | "fade" | "top-in-bottom-out" | "left-in-right-out" interface HeroVideoProps { animationStyle?: AnimationStyle videoSrc: string thumbnailSrc: string thumbnailAlt?: string className?: string } const animationVariants = { "from-bottom": { initial: { y: "100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "100%", opacity: 0 }, }, "from-center": { initial: { scale: 0.5, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.5, opacity: 0 }, }, "from-top": { initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, }, "from-left": { initial: { x: "-100%", opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: "-100%", opacity: 0 }, }, "from-right": { initial: { x: "100%", opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: "100%", opacity: 0 }, }, fade: { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, }, "top-in-bottom-out": { initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "100%", opacity: 0 }, }, "left-in-right-out": { initial: { x: "-100%", opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: "100%", opacity: 0 }, }, } export default function HeroVideoDialog({ animationStyle = "from-center", videoSrc, thumbnailSrc, thumbnailAlt = "Video thumbnail", className, }: HeroVideoProps) { const [isVideoOpen, setIsVideoOpen] = useState(false) const selectedAnimation = animationVariants[animationStyle] return (

setIsVideoOpen(true)}> {thumbnailAlt}

{isVideoOpen && ( setIsVideoOpen(false)} exit={{ opacity: 0 }} className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md" >

)}

) } 7c:["$","$L85",null,{"chatId":"6nNNauho32u","children":["$","$L86",null,{"data":{"@\"active-block\",\"6nNNauho32u\",":{"id":"b_xchIq1ujmwJ","messageId":"FOyGhcSwVwHBgXok8vWNEt5aSaeY4zM8","source":"$87","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Hero Video Dialog Demo","type":"code-project","project":"Hero Video Dialog Demo"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"6nNNauho32u\",":false,"":null},"children":"$L88"}]}]

About

Tags

Share

About

Tags

Share

More from dillion

More Templates Like This